<template>
  <div class="base-mask">
    <div class="container">
      <el-container class="hv100">
        <el-header class="padding0 header no-select" height="50px">
          <span>群管理【{{ detail.group_name }}】</span>
          <i class="close-btn el-icon-close" @click="close"></i>
        </el-header>
        <el-main class="main padding0">
          <el-container class="hv100">
            <el-aside width="100px" class="aside-border no-select">
              <div
                class="menu-list"
                :class="{ 'menu-list-selectd': tabIndex == 0 }"
                @click="triggerTab(0)"
              >
                群信息
              </div>
              <div
                class="menu-list"
                :class="{ 'menu-list-selectd': tabIndex == 1 }"
                @click="triggerTab(1)"
              >
                群成员
              </div>
              <div
                class="menu-list"
                :class="{ 'menu-list-selectd': tabIndex == 2 }"
                @click="triggerTab(2)"
              >
                群公告
              </div>
              <div
                class="menu-list"
                :class="{ 'menu-list-selectd': tabIndex == 3 }"
                @click="triggerTab(3)"
              >
                群设置
              </div>
            </el-aside>

            <!-- 群介绍模块 -->
            <el-main v-if="tabIndex == 0">
              <el-row>
                <el-col :span="14">
                  <el-form ref="groupForm" :model="form" :rules="rules">
                    <el-form-item label="群名:" prop="group_name">
                      <el-input
                        v-model="form.group_name"
                        size="medium"
                        placeholder="请输入群名称"
                        maxlength="30"
                        show-word-limit
                      />
                    </el-form-item>
                    <el-form-item label="群描述:">
                      <el-input
                        type="textarea"
                        v-model="form.profile"
                        rows="3"
                        placeholder="请输入群描述"
                      />
                    </el-form-item>
                    <el-form-item>
                      <el-button
                        type="primary"
                        icon="el-icon-edit"
                        size="small"
                        @click="editGroup"
                        :loading="loading"
                      >
                        修改信息</el-button
                      >
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="10" class="avatar-col">
                  <div class="avatar-box">
                    <img :src="form.avatar" v-show="form.avatar" />
                    <div class="upload-icon">
                      <i class="el-icon-upload"></i>
                    </div>
                    <div class="upload-mask" @click="isAvatarCropper = true">
                      <i class="el-icon-plus"></i>
                    </div>
                  </div>
                  <p style="margin-top: 20px">设置头像</p>
                </el-col>
              </el-row>
            </el-main>

            <!-- 群成员模块 -->
            <el-main v-else-if="tabIndex == 1" class="padding0">
              <el-container class="hv100">
                <el-header height="50px" class="notice-header">
                  <el-input
                    :placeholder="`搜索群成员 ( 共${members.length}人 )`"
                    v-model="searchMembers"
                    clearable
                    style="width: 200px"
                    size="small"
                    prefix-icon="el-icon-search"
                  />
                  <p>
                    <el-button
                      plain
                      size="small"
                      icon="el-icon-plus"
                      @click="inviteFriendBox = true"
                    >
                      邀请好友
                    </el-button>
                    <el-button
                      size="small"
                      icon="el-icon-delete"
                      type="danger"
                      v-if="batchDelMember"
                      @click="deleteMembers"
                    >
                      确认删除
                    </el-button>
                    <el-button
                      plain
                      size="small"
                      icon="el-icon-finished"
                      v-else
                      @click="batchDelMember = true"
                    >
                      批量操作
                    </el-button>
                  </p>
                </el-header>
                <el-main class="padding0">
                  <el-scrollbar :native="false" tag="section" class="hv100">
                    <div class="members">
                      <div
                        v-for="(member, i) in filterMembers"
                        class="member no-select"
                        :class="{
                          'member-selectd': member.is_delete && batchDelMember,
                        }"
                        :key="member.user_id"
                      >
                        <div class="item-header">
                          <div class="avatar" @click="catUserDetail(member)">
                            <el-avatar :size="30" :src="member.avatar">
                              <img
                                src="~@/assets/image/detault-avatar.jpg"
                                alt=""
                              />
                            </el-avatar>
                            <span
                              class="nickname"
                              v-text="member.nickname"
                            ></span>
                            <span class="larkc-tag" v-show="member.is_manager"
                              >群主</span
                            >
                          </div>
                          <div
                            class="tools"
                            v-show="batchDelMember && !member.is_manager"
                          >
                            <i
                              class="el-icon-success"
                              @click.stop="triggerDelBtn(member)"
                              :class="{ 'is-delete': member.is_delete }"
                            ></i>
                          </div>
                        </div>
                        <div class="profile">
                          签名 | {{ member.motto ? member.motto : "未设置" }}
                        </div>
                      </div>
                    </div>
                  </el-scrollbar>
                </el-main>
              </el-container>
            </el-main>

            <!-- 群公告模块 -->
            <el-main v-else-if="tabIndex == 2" class="padding0">
              <el-container class="hv100">
                <el-header
                  height="50px"
                  class="notice-header"
                  style="padding-left: 14px"
                >
                  <span>群公告 ({{ notice.items.length }})</span>
                  <el-button
                    plain
                    size="small"
                    icon="el-icon-plus"
                    @click="showNoticeBox(0, '', '')"
                  >
                    添加公告
                  </el-button>
                </el-header>

                <el-main class="padding0">
                  <el-scrollbar :native="false" tag="section" class="hv100">
                    <div v-if="notice.items.length == 0" class="empty-notice">
                      <svg-not-data style="width: 80px; margin-bottom: 10px" />
                      <span>暂无群公告</span>
                    </div>

                    <div v-else class="notices">
                      <div
                        v-for="(item, index) in notice.items"
                        :key="item.id"
                        class="notice"
                      >
                        <div class="title">
                          <span
                            class="left-title"
                            v-text="item.title"
                            @click="
                              showNoticeBox(item.id, item.title, item.content)
                            "
                          ></span>
                          <span
                            class="right-tools no-select"
                            @click="catNoticeDetail(index)"
                            >{{ item.isShow ? "收起" : "展开" }}</span
                          >
                        </div>
                        <p class="datetime">
                          <el-avatar :size="15" :src="item.avatar">
                            <img
                              src="~@/assets/image/detault-avatar.jpg"
                              alt=""
                            />
                          </el-avatar>
                          <span
                            class="text nickname"
                            v-text="item.nickname"
                            @click="$refs.userBusinessCard.open(item.user_id)"
                          ></span>
                          <span class="text"
                            >发表于 {{ item.created_at.substr(0, 16) }}</span
                          >
                        </p>
                        <p
                          class="content"
                          :class="{ retract: !item.isShow }"
                          v-text="item.content"
                        ></p>
                      </div>
                    </div>
                  </el-scrollbar>
                </el-main>
              </el-container>
            </el-main>

            <el-main v-else-if="tabIndex == 3" class="padding0"> </el-main>
          </el-container>
        </el-main>
      </el-container>
    </div>

    <!-- 编辑公告信息 -->
    <div class="base-mask animated fadeIn" v-show="notice.isShowform">
      <div class="notice-box">
        <h4>编辑群公告</h4>
        <el-form ref="noticeForm" :model="notice.form" :rules="notice.rules">
          <el-form-item label="标题" prop="title">
            <el-input
              v-model="notice.form.title"
              size="medium"
              placeholder="请输入标题..."
              maxlength="30"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="详情" prop="content">
            <el-input
              type="textarea"
              v-model="notice.form.content"
              rows="5"
              placeholder="请输入公告详情..."
              maxlength="500"
            />
          </el-form-item>
          <el-form-item style="text-align: right">
            <el-button plain size="small" @click="notice.isShowform = false"
              >取消</el-button
            >
            <el-button
              type="primary"
              size="small"
              @click="onSubmitNotice"
              :loading="notice.loading"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>

    <avatar-cropper v-if="isAvatarCropper" v-on:close="closeAvatarCropper" />

    <!-- 查看好友用户信息 -->
    <user-business-card ref="userBusinessCard" />

    <group-launch
      v-if="inviteFriendBox"
      :group-id="groupId"
      @close="inviteFriendBox = false"
      @invite-success="inviteSuccess"
    />
  </div>
</template>
<script>
import AvatarCropper from "@/components/layout/AvatarCropper";
import UserBusinessCard from "@/components/user/UserBusinessCard";
import GroupLaunch from "@/components/group/GroupLaunch";
import { SvgNotData } from "@/core/icons";

import {
  ServeGetGroupMembers,
  ServeGetGroupNotices,
  ServeEditGroupNotice,
  ServeRemoveMembersGroup,
  ServeGroupDetail,
  ServeEditGroup,
} from "@/api/group";

export default {
  name: "group-manage",
  props: {
    groupId: {
      type: [String, Number],
      default: null,
    },
  },
  components: {
    AvatarCropper,
    UserBusinessCard,
    GroupLaunch,
    SvgNotData,
  },
  data() {
    return {
      // 当前选中菜单
      tabIndex: 0,

      loading: false,
      form: {
        group_name: "",
        profile: "",
        avatar: "",
      },
      rules: {
        group_name: [
          {
            required: true,
            message: "用户昵称不能为空!",
            trigger: "blur",
          },
        ],
      },

      detail: {
        group_name: "",
        profile: "",
        avatar: "",
      },

      // 群成员列表
      searchMembers: "",
      batchDelMember: false,
      members: [],

      // 群公告相关数据
      notice: {
        isShowform: false,
        loading: false,
        form: {
          id: 0,
          title: "",
          content: "",
        },
        rules: {
          title: [
            {
              required: true,
              message: "标题不能为空!",
              trigger: "blur",
            },
          ],
          content: [
            {
              required: true,
              message: "详情不能为空",
              trigger: "blur",
            },
          ],
        },
        items: [],
      },

      inviteFriendBox: false,
      isAvatarCropper: false,
    };
  },
  computed: {
    filterMembers() {
      return this.searchMembers == ""
        ? this.members
        : this.members.filter((item, index) => {
            return (
              item.nickname.match(this.searchMembers) != null ||
              item.visit_card.match(this.searchMembers) != null
            );
          });
    },
  },
  created() {
    this.loadGroupDetail();
    this.loadMembers();
    this.loadNotices();
  },
  methods: {
    // 加载群信息
    loadGroupDetail() {
      ServeGroupDetail({
        group_id: this.groupId,
      }).then((res) => {
        if (res.code == 200) {
          let result = res.data;
          this.form.group_name = result.group_name;
          this.form.profile = result.group_profile;
          this.form.avatar = result.avatar;

          this.detail = {
            group_name: result.group_name,
            profile: result.profile,
            avatar: result.avatar,
          };
        }
      });
    },

    // 加载群组成员列表
    loadMembers() {
      ServeGetGroupMembers({
        group_id: this.groupId,
      }).then((res) => {
        if (res.code == 200) {
          this.members = res.data.map((item) => {
            item.is_delete = false;
            return item;
          });
        }
      });
    },

    // 加载群组公告列表
    loadNotices() {
      ServeGetGroupNotices({
        group_id: this.groupId,
      }).then((res) => {
        if (res.code == 200) {
          this.notice.items = res.data.map((item) => {
            item.isShow = false;
            return item;
          });
        }
      });
    },

    // 修改群信息
    editGroup() {
      this.$refs.groupForm.validate((valid) => {
        if (!valid) return false;
        this.loading = true;
        ServeEditGroup({
          group_id: this.groupId,
          group_name: this.form.group_name,
          group_profile: this.form.profile,
          avatar: this.form.avatar,
        })
          .then((res) => {
            if (res.code == 200) {
              this.detail.group_name = this.form.group_name;
              this.detail.profile = this.form.profile;
              this.detail.avatar = this.form.avatar;

              this.$message({
                message: "信息修改成功...",
                type: "success",
              });
            } else {
              this.$message("信息修改失败...");
            }
          })
          .finally(() => {
            this.loading = false;
          });
      });
    },

    // 关闭窗口
    close() {
      this.$emit("close");
    },

    // 左侧菜单栏切换事件
    triggerTab(i) {
      this.tabIndex = i;
    },

    // 关闭头像裁剪弹出层
    closeAvatarCropper(type, avatar = "") {
      this.isAvatarCropper = false;
      if (type == 1 && avatar != "") {
        this.form.avatar = avatar;
      }
    },

    // 显示编辑公告窗口
    showNoticeBox(id = 0, title = "", content = "") {
      this.notice.isShowform = true;
      this.notice.form.id = id;
      this.notice.form.title = title;
      this.notice.form.content = content;
    },

    // 编辑公告提交事件
    onSubmitNotice() {
      this.$refs.noticeForm.validate((valid) => {
        if (!valid) return false;

        this.notice.loading = true;
        ServeEditGroupNotice({
          notice_id: this.notice.form.id,
          group_id: this.groupId,
          title: this.notice.form.title,
          content: this.notice.form.content,
        })
          .then((res) => {
            if (res.code == 200) {
              this.notice.isShowform = false;
              this.loadNotices();
              this.$notify({
                title: "消息提示",
                message: this.notice.form.id
                  ? "群公告修改成功..."
                  : "群公告添加成功...",
                type: "success",
              });
            } else {
              this.$notify({
                title: "消息提示",
                message: this.notice.form.id
                  ? "群公告修改失败..."
                  : "群公告添加失败...",
                type: "success",
              });
            }
          })
          .catch((err) => {
            this.$notify({
              title: "消息提示",
              message: "网络异常，请稍后再试...",
              position: "bottom-right",
              type: "warning",
            });
          })
          .finally(() => {
            this.notice.loading = false;
          });
      });
    },

    // 展开/收起群公告详情
    catNoticeDetail(index) {
      this.notice.items[index].isShow = !this.notice.items[index].isShow;
    },

    // 查看群成员信息事件
    catUserDetail(item) {
      this.$refs.userBusinessCard.open(item.user_id);
    },

    // 选中删除成员事件
    triggerDelBtn(member) {
      let i = this.members.findIndex((item) => {
        return item.id == member.id;
      });

      this.members[i].is_delete = !this.members[i].is_delete;
    },

    // 批量删除群成员
    deleteMembers() {
      let ids = [],
        names = [];

      this.members.forEach((item) => {
        if (item.is_delete) {
          ids.push(item.user_id);
          names.push(item.nickname);
        }
      });

      if (ids.length == 0) {
        this.batchDelMember = false;
        return;
      }

      this.$confirm(`您确定要将【 ${names.join("、")}】移出群聊?`, "温馨提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "取消",
        dangerouslyUseHTMLString: true,
        customClass: "border-radius0",
      })
        .then(() => {
          ServeRemoveMembersGroup({
            group_id: this.groupId,
            members_ids: ids,
          }).then((res) => {
            if (res.code == 200) {
              this.loadMembers();
              this.$notify({
                title: "删除成功",
                message: `已成功将群成员移除群组...`,
                type: "success",
              });
            }
          });
        })
        .catch(() => {
          this.members.map((item) => {
            return (item.is_delete = false);
          });
          this.batchDelMember = false;
        });
    },

    // 好友邀请成功回调方法
    inviteSuccess() {
      this.inviteFriendBox = false;
      this.loadMembers();
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-scrollbar__wrap {
  overflow-x: hidden;
}

.base-mask {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 80%;
  height: 500px;
  max-width: 800px;
  border-radius: 3px;
  overflow: hidden;
  background-color: white;

  .header {
    height: 50px;
    line-height: 50px;
    position: relative;
    text-indent: 15px;
    border-bottom: 1px solid #f5eeee;

    .close-btn {
      position: absolute;
      right: 20px;
      top: 15px;
      font-size: 20px;
      cursor: pointer;
    }
  }

  .aside-border {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    padding: 8px;
    border-right: 1px solid #f5f5f5;

    .menu-list {
      height: 25px;
      line-height: 25px;
      margin: 8px 2px;
      font-weight: 400;
      font-size: 13px;
      background-color: white;
      cursor: pointer;
      border-left: 3px solid white;
      padding-left: 10px;
    }

    .menu-list-selectd {
      color: #2196f3;
      border-color: #2196f3;
    }
  }
}

.avatar-col {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.avatar-box {
  width: 100px;
  height: 100px;
  box-shadow: 0px 0px 7px 1px #e8e4e4;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: ease 0.5s;

  .upload-icon {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(184, 184, 197, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;

    i {
      font-size: 30px;
      color: #1bb0f3;
    }
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 0;
  }

  .upload-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 3;
    display: none;
    justify-content: center;
    align-items: center;

    i {
      font-size: 30px;
      color: white;
    }
  }

  &:hover .upload-mask {
    display: flex;
  }
}

/* 群成员相关 start */
.members {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 5px 20px;
  justify-content: space-between;

  .member {
    width: 48%;
    height: 70px;
    border-radius: 3px;
    cursor: pointer;
    border: 1px dashed #e2dcdc;
    margin: 5px 0;
    padding: 3px;
    transition: ease 0.5s;

    .larkc-tag {
      color: #3370ff;
      background-color: #e1eaff;
    }

    .item-header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .avatar {
        flex: 1 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 3px 5px;

        .nickname {
          font-size: 13px;
          margin: 0 5px 0 15px;
        }
      }

      .tools {
        flex-basis: 50px;
        overflow: hidden;
        text-align: right;
        padding-right: 5px;

        i {
          color: #cccccc;
        }

        .is-delete {
          color: #03a9f4;
        }
      }
    }

    .profile {
      color: #8f8a8a;
      font-size: 12px;
      padding: 3px 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 3px 0;
    }
  }
}

.members .member:hover,
.members .member-selectd {
  border-color: #2196f3;
}

/* 群成员相关 end */

/* 公告相关 start */
.notice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.empty-notice {
  width: 100%;
  height: 100%;
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  span {
    color: #cccccc;
    font-size: 13px;
  }
}

.notices {
  .notice {
    cursor: pointer;
    min-height: 76px;
    overflow: hidden;
    border-bottom: 1px dashed #e2dcdc;
    margin-bottom: 15px;
    margin-right: 15px;
    padding-bottom: 5px;
    margin: 2px 20px 15px 15px;

    h6 {
      font-size: 15px;
      font-weight: 300;
    }

    .title {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      height: 30px;

      .left-title {
        flex: 1 1;
        height: 100%;
        line-height: 30px;
        font-size: 14px;
      }

      .right-tools {
        flex-basis: 70px;
        flex-shrink: 0;
        height: 100%;
        line-height: 30px;
        text-align: right;
        font-weight: 300;
        font-size: 12px;
        color: #2196f3;
      }
    }

    .datetime {
      font-size: 10px;
      color: #a59696;
      font-weight: 300;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 10px 0;

      .text {
        margin: 0 5px;
      }

      .nickname {
        color: #2196f3;
        font-weight: 400;
      }
    }

    .retract {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .content {
      font-size: 12px;
      line-height: 28px;
      font-weight: 500;
      color: #7d7a7a;
    }
  }
}

.notice-box {
  position: relative;
  padding: 28px;
  background: #fff;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
  height: 415px;
  width: 420px;

  h4 {
    margin-bottom: 20px;
    font-weight: 400;
  }
}

/* 公告相关 end */
</style>
